<template>
  <v-app>
    <PostItAlert></PostItAlert>
    <PostItSuccess></PostItSuccess>
    <v-main>
      <div class="container">
        <div class="doc">
          <!-- 工具栏 -->
          <Toolbar
              style="border-bottom: 1px solid #ccc;width: 100vw;"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              class="toolbar-container"
          />
          <!-- 编辑器 -->
          <div class="editor-container" style="width: 60%;" >
            <div class="title-container"><input v-model="title" placeholder="Title..." style="background-color: white;width: 100%;"></div>
            <Editor
                style="height: 600px; overflow-y: hidden;width: 100%"
                :defaultConfig="editorConfig"
                v-model="html"
                @onCreated="onCreated"
            />
          </div>
        </div>
        <v-btn class="submit" @click="savePostIt" color="rgb(245, 246, 252)" style="text-transform: none;font-family: Quicksand;font-weight: bold;font-size: 1rem"><font-awesome-icon icon="fa-regular fa-floppy-disk" style="color:#163268;"/><span>Save</span></v-btn>
      </div>
    </v-main>
    <PageFooter></PageFooter>
  </v-app>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import PageFooter from "@/components/PageFooter.vue";
import { Boot } from '@wangeditor/editor'
import formulaModule from '@wangeditor/plugin-formula'
import markdownModule from '@wangeditor/plugin-md'
import { i18nChangeLanguage } from '@wangeditor/editor'
import '@/assets/fonts/fonts.css'
import PostItAlert from "@/components/PostItAlert.vue";
import {EventBus} from "@/utils/EventBus";
import PostItSuccess from "@/components/PostItSuccess.vue";
import {ipcRenderer} from "electron";
import path from "path";
import fs from "fs";
const { app } = require('electron').remote;
if (app.getLocale()==='zh-CN'){
  i18nChangeLanguage('zh-CN')
}
else {
  i18nChangeLanguage('en')
}
Boot.registerModule(formulaModule)
Boot.registerModule(markdownModule)
export default {
  name: "SubEdit",
  data: () => ({
    id:null,
    title:'',
    editor: null,
    html: "",
    toolbarConfig: {
      // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
      excludeKeys: [ 'fullScreen','group-image','group-video' ],
      insertKeys: {
        index: 25,
        keys: [
          "insertImage",
          'insertVideo',
          'insertFormula', // “插入公式”菜单,
        ],
      },
    },
    editorConfig: {
      placeholder: "Please type in your post-it!",
      // autoFocus: false,
      hoverbarKeys: {
        formula: {
          menuKeys: ['editFormula'], // “编辑公式”菜单
        },
      },
      // 所有的菜单配置，都要在 MENU_CONF 属性下
      MENU_CONF: {},
    },
  }),
  components:{PostItSuccess, PostItAlert, PageFooter, Editor, Toolbar},
  methods:{
    savePostIt() {
      EventBus.$emit('toggle-alert-postit', false, '');
      EventBus.$emit('toggle-success-postit', false, '');
      if (this.title === '') {
        EventBus.$emit('toggle-alert-postit', true, 'empty-title');
      } else {
        const jsonFilePath = path.resolve(__dirname, '../app/data/postits/data.json');
        const data = JSON.parse(fs.readFileSync(jsonFilePath, 'utf-8'));
        data[this.id] = {
          'id': this.id,
          'date': new Date().getTime(),
          'content': this.editor.getHtml(),
          'title': this.title
        }
        fs.writeFileSync(jsonFilePath, JSON.stringify(data));
        EventBus.$emit('toggle-success-postit', true, this.title);
      }
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
    },
  },
  mounted() {
    this.$nextTick(() => {
      ipcRenderer.send('subedit-accomplish')
      })
    ipcRenderer.on('send-postit',(event, args)=>{
      this.id = args
      const postitjsonFilePath = path.resolve(__dirname, '../app/data/postits/data.json');
      const postitData = JSON.parse(fs.readFileSync(postitjsonFilePath, 'utf-8'));
      this.title = postitData[this.id].title
      this.html = postitData[this.id].content
    });
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  },
}
</script>

<style scoped>
.v-application {
  max-height: 100vh;
}
.container{
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background:linear-gradient(0deg,#fff 3%,hsla(0,0%,80%,0)),linear-gradient(0deg, #E0C3FC 0%,#8EC5FC 100%);
  animation: rotate-gradient 15s ease-in-out infinite;
  font-family: Quicksand,Smileysans,"PingFang SC", "Microsoft Yahei", sans-serif;
}
@keyframes rotate-gradient {
  0% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(0deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  5% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(18deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  10% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(36deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  15% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(54deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  20% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(72deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  25% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(90deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  30% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(108deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  35% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(126deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  40% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(144deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  45% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(162deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  50% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(180deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  55% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(198deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  60% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(216deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  65% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(234deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  70% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(252deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  75% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(270deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  80% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(288deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  85% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(306deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  90% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(324deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  95% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(342deg, #E0C3FC 0%,#8EC5FC 100%);
  }
  100% {
    background: linear-gradient(0deg,#fff 3%,hsla(0,0%,90%,0)),linear-gradient(360deg, #E0C3FC 0%,#8EC5FC 100%);
  }
}
.submit{
  transform: scale(1);
  box-shadow: 4px 4px 7px #d9d9d9, -4px -4px 7px rgb(245, 246, 252);
  transition: all ease-in-out .3s;
}
.submit:active{
  box-shadow: inset 4px 4px 7px #d9d9d9, inset -4px -4px 7px rgb(245, 246, 252);
  transition: all ease-in-out .3s;
  transform: scale(.95);
}
.doc{
  display:flex;
  flex-direction: column;
  align-items: center;
}
input{
  font-family: Quicksand,Smileysans,"PingFang SC", "Microsoft Yahei", sans-serif;
  font-size: 2rem;
  font-weight:bold;
  border:0;
  outline: none;
  line-height:1;
}
.editor-container{
  background-color: white;
  margin:20px auto 10px auto;
  padding: 20px 50px 50px 50px;
  box-shadow: 10px 10px 20px #d9d9d9, -10px -10px 20px rgb(245, 246, 252);
  border-radius: 5px;
}
.title-container{
  padding:20px 0;
  border-bottom:1px solid #e8e8e8
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style src="./scrollbar.css"></style>